import React from 'react'
import '../../assets/styles/liveList.less'
import { instance } from '../../../../api/request'

import { useState } from 'react';
export default function liveList() {
    
    const [dataSource, setdataSource] = useState<any>([])
    React.useEffect((): any => {
      findLive()
    }, [])
    async function findLive() {
        const res=await instance.get('/live')

        console.log(res.data);
        
        var arr:any=[]
        res.data.forEach((item:any)=>{
            if(item.live_status==101){
                const obj={
                    cover_img: item.cover_img,
                    name:item.name,
                    status: '正在直播',
                    roomid: item.roomid
                }
                arr.push(obj)
            }else{
                const obj={
                    cover_img: item.cover_img,
                    name:item.name,
                    status: '直播结束',
                    roomid: item.roomid
                }
                arr.push(obj)     
            }
        })
       setdataSource(arr)
        
    }
    return (
        <div className="YliveList">
           <div className="box">
               {
                 dataSource.map((item:any,keys:any)=>{

                          return <div className="eachBox" key={keys}>                   
                              <img src={item.cover_img} alt="" />
                              <div className="status">{item.status}</div>
                              <div className="text">{item.name}</div>
                          </div>
                 })  
               }
           </div>
        </div>
    )
}
